// 列表 子
import { useState } from "react";

import { Button } from 'antd';

const List3 =(props)=>{
  console.log(props);

  const [use,setuse] = useState(props)

  //单删
  let del =(index)=>{
    // console.log(index);
    props.list.list.splice(index,1)
    setuse({
      ...use,list:props.list.list
    })
  } 

  // 批删
  let delAll = () =>{
    props.list.list.length=0
    setuse({
      ...use,list:props.list.list
    })
  }


  return(
    <>
      <div className="list3">
        <ul>
          {
           props.list.list.length ? props.list.list.map((item,index)=>{
              // console.log(item);
              return(
                <div key={index}>
                  <li className="lfdi">

                    {/* 数据 */}
                    <span>{item.time}</span>
                    <span>{item.name}</span>
                    <span 
                      className={[item.priority===1? 'classA' : '' || item.priority===2? 'classB' : '' ||
                      item.priority===3? 'classC' : '' || item.priority===4? 'classD' : '']}
                    >
                      {item.priority}
                    </span>

                    {/* 单删 */}
                    <span onClick={()=>del(index)}>X</span>

                  </li>
                </div>
              )
            }) : <h2 className="h">暂无数据</h2>
          }

          {/* 全删 */}
          <Button className="buttmasd" type="primary" onClick={delAll}>清除</Button>

        </ul>
      </div>
    </>
  )
}

export default List3;